
<template>
    <div class="container">
        <!-- 左侧选座区 -->
        <div class="seat-panel">
            <h3>已选座位（{{ selectedSeats.length }}/5）</h3>
            <div class="seat-map">
                <div v-for="(row, rowIndex) in seatData" :key="rowIndex" class="row">
                    <div v-for="seat in row" :key="seat.id" class="seat" :class="seat.status" @click="toggleSeat(seat)">
                        <span class="seat-label">{{ seat.label }}</span>
                        <div v-if="seat.status === 'selected'" class="selected-icon">✓</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧信息区 -->
        <div class="info-panel">
            <img :src="movieImage" class="movie-poster" alt="《唐探1900》海报">

            <div class="movie-info">
                <h1>《唐探1900》</h1>
                <div class="meta">
                    <p><span>类型：</span>喜剧 / 动作 / 悬疑</p>
                    <p><span>时长：</span>136分钟</p>
                    <p><span>影院：</span>南华影院</p>
                    <p><span>影厅：</span>7号厅（国语3D）</p>
                    <p><span>场次：</span>今天 2月18日 19:15</p>
                    <p><span>票价：</span>¥50/张</p>
                </div>
            </div>

            <div class="order-info">
                <div class="price-summary">
                    <p>已选座位：{{ selectedSeats.join(', ') || '暂未选择' }}</p>
                    <p class="total">总价：<em>¥{{ totalPrice }}</em></p>
                </div>

                <div class="contact-input">
                    <input type="tel" placeholder="请输入手机号码" v-model="phoneNumber" maxlength="11" />
                </div>

                <button class="confirm-btn" :class="{ disabled: !canConfirm }" @click="handleConfirmation">
                    确认选座
                </button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import axios from 'axios'
import movieImage from '@/assets/film.png'

// 座位数据
const seatData = ref([])
const selectedSeats = ref([])
const phoneNumber = ref('')

// 加载座位数据
const loadSeatData = async () => {
    try {
        const { data } = await axios.get('/data/seats.json')
        seatData.value = data.seats.map(row =>
            row.map(seat => ({
                ...seat,
                // 转换状态标识
                status: seat.status === 'available' ? 'available' :
                    seat.status === 'sold' ? 'sold' : 'blocked'
            }))
        )
    } catch (error) {
        console.error('座位数据加载失败:', error)
        seatData.value = generateFallbackSeats()
    }
}

// 生成备用数据
const generateFallbackSeats = () => {
    return Array(9).fill().map((_, row) =>
        Array(10).fill().map((_, col) => ({
            id: `R${row}C${col}`,
            label: `${String.fromCharCode(65 + row)}${col + 1}`,
            status: row < 2 ? 'blocked' : Math.random() < 0.2 ? 'sold' : 'available'
        }))
    )
}

// 选座切换逻辑
const toggleSeat = (seat) => {
    if (!['available', 'selected'].includes(seat.status)) return

    if (seat.status === 'available' && selectedSeats.value.length < 5) {
        seat.status = 'selected'
        selectedSeats.value.push(seat.label)
    } else {
        seat.status = 'available'
        selectedSeats.value = selectedSeats.value.filter(s => s !== seat.label)
    }
}

// 计算属性
const totalPrice = computed(() => selectedSeats.value.length * 50)
const canConfirm = computed(() =>
    selectedSeats.value.length > 0 &&
    /^1[3-9]\d{9}$/.test(phoneNumber.value)
)

// 确认操作
const handleConfirmation = () => {
    alert(`购票成功！\n座位：${selectedSeats.value.join(', ')}\n总价：¥${totalPrice.value}`)
    // 锁定已选座位
    seatData.value.forEach(row => {
        row.forEach(seat => {
            if (seat.status === 'selected') seat.status = 'sold'
        })
    })
    selectedSeats.value = []
    phoneNumber.value = ''
}

// 初始化加载
onMounted(() => {
    loadSeatData()
})
</script>

<style scoped>
.container {
    display: flex;
    max-width: 1200px;
    margin: 20px auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    font-family: 'Microsoft YaHei', sans-serif;
}

.seat-panel {
    flex: 1;
    padding: 24px;
    border-right: 1px solid #eee;
}

.info-panel {
    width: 320px;
    padding: 24px;
    background: #f8f9fa;
}

/* 座位布局 */
.seat-map {
    margin-top: 20px;
}

.row {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 12px 0;
}

.seat {
    width: 48px;
    height: 48px;
    border: 2px solid #ff4444;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    transition: all 0.2s;
}

.seat-label {
    font-size: 14px;
    font-weight: 500;
}

/* 座位状态 */
.seat.available {
    background: #f8f9fa;

    &:hover {
        transform: scale(1.05);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }
}


.seat.selected {
    background: #4CAF50;
    border-color: #388e3c;
    color: white;

    .seat-label {
        color: white;
    }
}

.seat.sold {
    background: #DCDCDC;
    border-color: #DCDCDC;
    cursor: not-allowed;
}

.seat.blocked {
    background: #f5f5f5;
    border-color: #ddd;
    cursor: not-allowed;
}

.selected-icon {
    position: absolute;
    right: 2px;
    bottom: 2px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

/* 电影信息 */
.movie-poster {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 16px;
}

.movie-info h1 {
    color: #333;
    margin-bottom: 16px;
    font-size: 24px;
}

.meta p {
    margin: 8px 0;
    color: #666;

    span {
        color: #999;
        display: inline-block;
        width: 60px;
    }
}

/* 订单信息 */
.price-summary {
    padding: 16px;
    background: white;
    border-radius: 6px;
    margin: 20px 0;

    .total {
        font-size: 20px;
        margin-top: 8px;

        em {
            color: #4CAF50;
        }
    }
}

.contact-input input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 16px;
}

.confirm-btn {
    width: 100%;
    padding: 14px;
    background: #4CAF50;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s;

    &:hover {
        background: #45a049;
    }

}
</style>
/* eslint-disable */